<!--
     Noel Delgado
     https://codepen.io/noeldelgado/pen/ByxQjL?editors=1010
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>X射线</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlinl">
        <rect width="100%" height="100%" fill="#e7e7e8"></rect>
        <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/a.svg' width='100%' height='100%'></image>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlinl">
        <defs>
            <clipPath id="mask">
                <circle id="mask-circle" cx='50%' cy='50%' r='8%' style='fill:#ffffff'></circle>
            </clipPath>
        </defs>
        <g clip-path='url(#mask)'>
            <rect width="100%" height="100%" fill="#272730"></rect>
            <image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/b.svg" width="100%" height="100%" />
        </g>
        <circle id="circle-shadow" cx="50%" cy="50%" r="8%" style="stroke: #fff; fill: transparent; stroke-width: 5;" />
    </svg>
    <div>
        SVG <del>Masking</del><ins>clip-path</ins> Experiment.<br />
        <span>Move your mouse/finger over the image</span>
    </div>
<script src="./index.js"></script>
</body>
</html>